
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Using FusionCharts with RoR - Basic Examples </h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>FusionCharts can effectively be used with Ruby to plot dynamic data-driven charts. In this example, we'll show a few basic examples to help you get started.</p>
    <p>We'll cover the following examples here:</p>
    <ol>
      <li>We'll use FusionCharts in Ruby with a pre-built Data.xml (which contains data to plot)</li>
      <li>We'll then change the above chart into a single page chart using dataXML method.</li>
      <li>Finally, we'll use FusionCharts JavaScript class to embed the chart.</li>
      </ol>
    <p>Let's quickly see each of them. <strong>Before you proceed with the contents in this page, we strictly recommend you to please go through the section &quot;How FusionCharts works?&quot;.</strong> </p>    </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="highlightBlock">All code discussed here is present in <br><span class="codeInline">Controller : Download Package > Code > RoR > app > controllers > basic_example_controller.rb</span>. <br> <span class="codeInline">Rhtml : Download Package > Code > RoR > app > views > basic_example</span> folder. </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Setting up the charts for use </td>
  </tr>
  <tr>
    <td valign="top" class="text">In our code, we've used the charts contained in <span class="codeInline">Download Package >> RoR >> public >>FusionCharts</span> folder. When you run your samples, you need to make sure that the SWF files are in proper location. </td>
  </tr>
  <tr>
    <td valign="top" class="header">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Plotting a chart from data contained in <span class="codeInline">Data.xml</span></td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>Let's now get to building our first example. In this example, we'll create a &quot;Monthly Unit Sales&quot; chart using <span class="codeInline">dataURL</span> method. For a start, we'll hard code our XML data in a physical XML document <span class="codeInline">Data.xml </span>and then utilize it in our chart contained in Ruby  </p>
    <p>Let's first have a look at the XML Data document:</p>   </td>
  </tr>

  <td valign="top" class="codeBlock">

    &lt;chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Jan' value='462' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Feb' value='857' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Mar' value='671' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Apr' value='494' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='May' value='761' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Jun' value='960' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Jul' value='629' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Aug' value='622' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Sep' value='376' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Oct' value='494' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Nov' value='761' /&gt;<br/>
&nbsp; &nbsp; &nbsp;&lt;set label='Dec' value='960' /&gt;<br/>
&lt;/chart&gt;<br/>
  <tr>
    <td valign="top" class="text"><p>This XML is stored as <span class="codeInline">Data.xml</span> in <span class="codeInline">Data </span>Folder under <span class="codeInline">basic_example</span> folder. It basically contains the data to create a single series chart to show &quot;Monthly Unit Sales&quot;. We'll plot this on a Column 3D Chart. Let's see how to do that. </p>
      <p>To plot a Chart that consumes this data, you need to include the HTML code to embed a Flash object and then provide the requisite parameters. To make things simpler for you, we've put all this functionality in a function named as <span class="codeInline">renderChartHTML()</span>. 
     <p>Let's see it in example. 
  <tr>
    <td colspan="6" valign="top" class="codeBlock">
    <b>Controller:basic_example_controller.rb <br/>  Action: basicchart</b><br>
	class BasicExampleController < ApplicationController <br/>
&nbsp;def basicchart<br/>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Create the chart - Column 3D Chart with data from Data/Data.xml</span><br/>
&nbsp;&nbsp;<strong>&nbsp;@chart = renderChartHTML("/FusionCharts/Column3D.swf", "/Data/Data.xml", "", "myFirst", 600, 300, false)</strong><br/>
&nbsp;end<br/>
  end<font color="blue"><br>
  <br/>
    </font>
    <b>View: </b><br>
    &lt;HTML&gt;
      <br />
&nbsp;&lt;BODY&gt;<br />
&nbsp;&nbsp;<strong>&nbsp;&lt;%= @chart%&gt;</strong><br />
&nbsp;&lt;/BODY&gt;<br />
&lt;/HTML&gt;<br /></td>
  <tr>
  <td valign="top" class="text"><p>
  
     We've simply invoked the <span class="codeInline">renderChartHTML</span> function to render the chart. To this function, you can pass the following parameters (in same order):</p>    
  <tr>
    <td valign="top" class="text"><table width="95%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#f1f1f1">
      <tr>
        <td width="19%" valign="top" class="header">Parameter</td>
        <td width="81%" valign="top" class="header">Description</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartSWF</td>
        <td valign="top" class="text">SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we've specified it as <span class="codeInline">/FusionCharts/Column3D.swf</span></td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">strURL</td>
        <td valign="top" class="text">If you intend to use <span class="codeInline">dataURL</span> method for the chart, pass the URL as this parameter. Else, set it to &quot;&quot; (in case of <span class="codeInline">dataXML</span> method). In this case, we're using <span class="codeInline">Data.xml</span> file, so we specify <span class="codeInline">Data/Data.xml</span></td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">strXML</td>
        <td valign="top" class="text">If you intend to use <span class="codeInline">dataXML</span> method for this chart, pass the XML data as this parameter. Else, set it to &quot;&quot; (in case of <span class="codeInline">dataURL</span> method). Since we're using <span class="codeInline">dataURL</span> method, we specify this parameter as &quot;&quot;.</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartId</td>
        <td valign="top" class="text"> Id for the chart, using which it will be recognized in the HTML page. <strong>Each chart on the page needs to have a unique Id.</strong></td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartWidth</td>
        <td valign="top" class="text">Intended width for the chart (in pixels)</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartHeight</td>
        <td valign="top" class="text">Intended height for the chart (in pixels)</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">debugMode</td>
        <td valign="top" class="text">Whether to start the chart in debug mode. Please see <span class="codeInline">Debugging your Charts</span> section for more details on Debug Mode. </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>When you now run this page, you'll see a chart like the one below. </p>
    <p class="highlightBlock">If you do not see a chart like the one below, please follow the steps listed in <span class="codeInline">Debugging your Charts &gt; Basic Troubleshooting</span> section of this documentation. </p></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_BasicChart.jpg" width="591" height="292" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">So, you just saw how simple it is to create a chart using Ruby and FusionCharts. Let's now convert the above chart to use <span class="codeInline">dataXML</span> method. </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Changing the above chart into a single page chart using dataXML method</td>
  </tr>
  <tr>
  <td valign="top" class="text">To convert this chart to use dataXML method, we create another page <span class="codeInline">  </tr>
  <tr>
    <td valign="top" class="codeBlock"><br />

    <b>Controller: basic_example_controller.rb <br>  Action: basicdataxml</b></b><br>
	class BasicExampleController < ApplicationController <br/>
&nbsp;def basicdataxml<br/>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Create an XML data document in a string variable</span><br/>
&nbsp;&nbsp;&nbsp;strXML = ""<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;chart caption='Monthly Unit Sales' xAxisName='Month' &nbsp;&nbsp;&nbsp;yAxisName='Units' showValues='0' formatNumberScale='0'
	&nbsp;&nbsp;&nbsp;showBorder='1'&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Jan' value='462' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Feb' value='857' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Mar' value='671' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Apr' value='494' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='May' value='761' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Jun' value='960' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Jul' value='629' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Aug' value='622' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Sep' value='376' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Oct' value='494' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Nov' value='761' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='Dec' value='960' /&gt;"<br/>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;/chart&gt;"<br/>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Create the chart - Column 3D Chart with data from strXML variable using dataXML method</span><br/>
&nbsp;&nbsp;<strong>&nbsp;@chart=renderChartHTML("/FusionCharts/Column3D.swf", "", strXML, "myNext", 600, 300, false)<br/>
&nbsp;end</strong><br/>
  end<font color="blue"><br/>
  </font>
  <tr>
    <td valign="top" class="codeBlock">
    <b>View:</b><br>
    
      &lt;HTML&gt;
      <br>
&nbsp;&lt;BODY&gt;
&nbsp;&nbsp;<br />
&nbsp;&nbsp;<strong>&nbsp;&lt;%= @chart%&gt;
&nbsp;&nbsp;</strong><br />
&nbsp;&lt;/BODY&gt;<br />
&lt;/HTML&gt;<font color="green"><br />
 </font>
<tr>
    <td valign="top" class="text"><p>As you can see above, we:</p>
      <ol>
        
        <li>Create the XML data document in an Ruby variable <span class="codeInline">strXML </span><span class="text">using string concatenation. Here, we're hard-coding the data. In your applications, you can build this data dynamically after interacting with databases or external sources of data.</span> </li>
        <li>Finally, create the chart and set the <span class="codeInline">dataXML</span> parameter as <span class="codeInline">strXML</span>. We leave <span class="codeInline">dataURL</span> parameter blank.</li>
      </ol>
    <p>When you see this chart, you'll get the same results as before. </p>    </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Using FusionCharts JavaScript class to embed the chart.</td>
  </tr>
  <tr>
    <td valign="top" class="text">If you see the charts from previous examples in the latest versions of Internet Explorer, you'll see a screen as below: </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_Activate.jpg" width="606" height="310" /></td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>Internet Explorer asks you to <span class="codeInline">&quot;Click and activate...&quot; </span>to use the chart. This is happening because of a technical issue on behalf of Microsoft. As such, all Flash movies need to be clicked once before you can start interacting with them. </p>
      <p>However, the good news is that there's a solution to it. This thing happens only when you directly embed the HTML code of the chart. It would NOT happen when you use JavaScript to embed the chart. To see how to embed using JavaScript at code level, please see <span class="codeInline">Creating Your First Chart &gt; JavaScript Embedding</span> Section. </p>
    <p>Again, to make things simpler for you, we've provided a function called <span class="codeInline">renderChart() </span>which helps you wrap this JavaScript function in Ruby function, so that you don't have to get your hands dirty with JavaScript, Flash and HTML. 
  <p>Let's now quickly put up a sample to show the use of this function.  </tr>
  <tr>
  <td valign="top" class="codeBlock"><p><br />
    <b>Controller: basic_example_controller.rb <br>  Action: simplechart</b></b><br>
	class BasicExampleController < ApplicationController <br/>
&nbsp;def simplechart<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Create the chart - Column 3D Chart with data from Data/Data.xml</span><br>
&nbsp;<strong>&nbsp;&nbsp;@chart=renderChart("/FusionCharts/Column3D.swf", "/Data/Data.xml", "", "myFirst", 600, 300, false, false)</strong><br/>
&nbsp;end<br/> 
  end  
    <p><font color="blue"><br/>
        </font>
        <b>View:</b><br>
        <font color="green"> &lt;HTML&gt;<br>
  &nbsp;&lt;HEAD&gt;<br>
  &nbsp;&nbsp;&lt;TITLE&gt;
      FusionCharts - Simple Column 3D Chart
      &lt;/TITLE&gt;<br>
      <font color="green">&nbsp;&nbsp;&lt;%<br>
  &nbsp; &nbsp; &nbsp;=begin<br>
  &nbsp; &nbsp; &nbsp;	'You need to include the following JS file, if you intend to embed the chart using JavaScript.<br>
  &nbsp; &nbsp; &nbsp;	'Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer<br>
  &nbsp; &nbsp; &nbsp;	'When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.<br>
  &nbsp; &nbsp; &nbsp;=end<br>
  &nbsp; 	%&gt; </font><br>
  <strong>&nbsp;&nbsp;&lt;SCRIPT LANGUAGE="Javascript" SRC="/FusionCharts/FusionCharts.js"&gt;&lt;/SCRIPT&gt;</strong><br>
  &nbsp;&lt;/HEAD&gt;<br>
  &nbsp;&lt;BODY&gt;<br>
  <strong>&nbsp;&nbsp;&nbsp;&lt;%= @chart%&gt;</strong><br>
  &nbsp;&lt;/BODY&gt;<br>
  &lt;/HTML&gt;</td>
</tr>
  <tr>
    <td valign="top" class="text">
    <p>The<span class="codeInline"> renderChart()</span> method takes in the following parameters: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><table width="95%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#f1f1f1">
      <tr>
        <td width="19%" valign="top" class="header">Parameter</td>
        <td width="81%" valign="top" class="header">Description</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartSWF</td>
        <td valign="top" class="text">SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we've specified it as <span class="codeInline">/FusionCharts/Column3D.swf</span></td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">strURL</td>
        <td valign="top" class="text">If you intend to use <span class="codeInline">dataURL</span> method for the chart, pass the URL as this parameter. Else, set it to &quot;&quot; (in case of <span class="codeInline">dataXML</span> method). In this case, we're using <span class="codeInline">Data.xml</span> file, so we specify <span class="codeInline">Data/Data.xml</span></td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">strXML</td>
        <td valign="top" class="text">If you intend to use <span class="codeInline">dataXML</span> method for this chart, pass the XML data as this parameter. Else, set it to &quot;&quot; (in case of <span class="codeInline">dataURL</span> method). Since we're using <span class="codeInline">dataURL</span> method, we specify this parameter as &quot;&quot;.</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartId</td>
        <td valign="top" class="text"> Id for the chart, using which it will be recognized in the HTML page. <strong>Each chart on the page needs to have a unique Id.</strong></td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartWidth</td>
        <td valign="top" class="text">Intended width for the chart (in pixels)</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">chartHeight</td>
        <td valign="top" class="text">Intended height for the chart (in pixels)</td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">debugMode</td>
        <td valign="top" class="text">Whether to start the chart in debug mode. Please see Debugging your Chart Section for more details on Debug Mode. </td>
      </tr>
      <tr>
        <td valign="top" class="codeInline">registerWithJS</td>
        <td valign="top" class="text">  Whether to register the chart with JavaScript. Please see FusionCharts and JavaScript section for more details on this. </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top" class="text">When you now view the chart, you'll see that no activation is required even in Internet Explorer. </td>
  </tr>
</table>
</body>
</html>
